<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户列表</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="${base}/js/lib/extjs/resources/css/ext-all.css"/>
	<script type="text/javascript" src="${base}/js/lib/extjs/adapter/ext/ext-base.js"></script>
	<script type="text/javascript" src="${base}/js/lib/extjs/ext-all-debug.js"></script>
	<script type="text/javascript" src="${base}/js/lib/extjs/ext-lang-zh_CN.js"></script>
  </head>
  
  <body>
    <script type="text/javascript">
	Ext.onReady(function() {
	    var proxy = new Ext.data.HttpProxy({
	        url: '${base}/admin/user/list.do',
	        method: 'POST'
	    });
	
	    var reader = new Ext.data.JsonReader(
	    { root: 'dataset', totalProperty: 'count' },
	        [
				{ name: 'id'},
				{ name: 'username'},
				{ name: 'email'},
				{ name: 'roleName'},
				{ name: 'registerTime'},
				{ name: 'lastLoginTime'}
	        ]
	    );
	
	    var store = new Ext.data.Store(
	        { proxy: proxy, reader: reader }
	    );
	
	    // create the Grid
	    var selM = new Ext.grid.CheckboxSelectionModel({  
	        dataIndex: "id"  
	    });
	    var datetimeRenderer = function(value){
			if(value && typeof value === "number") {
				var date = new Date(value);
				return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDay()+" "+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
			}
	    }
	    var enabledRenderer = function(value){
	    	if(value && typeof value === "boolean") {
	    		return value?"可用":"禁用";
	    	}
	    }
	    var colM = new Ext.grid.ColumnModel([
  			selM,
  			{ id: 'id', name: 'id', header: "用户ID", width: 30, height:80, sortable: true, dataIndex: 'id'},
  			{ id: 'username', name: 'username', header: "用户名", width: 40, height:80, sortable: true, dataIndex: 'username'},
  			{ id: 'email', name: 'email', header: "邮箱地址", width: 60, height:80, sortable: true, dataIndex: 'email'},
			{ id: 'roleName', name: 'roleName', header: "角色", width: 60, height:80, sortable: true, dataIndex: 'roleName'},
  			{ id: 'registerTime', name: 'registerTime', header: "注册时间", width: 50, height:80, sortable: true, dataIndex: 'registerTime',renderer: datetimeRenderer},
  			{ id: 'lastLoginTime', name: 'lastLoginTime', header: "最后登录时间", width: 50, height:80, sortable: true, dataIndex: 'lastLoginTime',renderer: datetimeRenderer},
  			{ id: 'enabled', name: 'enabled', header: "状态", width: 20, height:80, sortable: true, dataIndex: 'enabled',renderer: enabledRenderer}
  		]);
		
		var sform = new Ext.FormPanel({//这里是搜索表单
	        buttonAlign:'left',
	       	height:140,
	        labelWidth:70,
	        region:'north',
	        frame:true,
	        title: '用户列表',
	        items: [{
	                layout:'column',
	                items:[{
	                    layout: 'form',
	                    items: [{
	                        xtype:'textfield',
	                        fieldLabel: '用户名',
	                        id: 'username',
	                        name: 'username'
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'combo',
	                        fieldLabel:'角色',
	                        name: 'roleName',
	                        id: '_roleName',
	                        store : new Ext.data.SimpleStore({  
					            fields : ['value', 'text'],  
					            data : [['ROLE_USER','普通用户'],['ROLE_ADMIN','管理员'],['ROLE_DEVELOPER','超级管理员']]  
					        }),
	                        hiddenName:"roleName",
					        mode:'local',
					        valueField : 'value',
					        displayField : 'text',
					        mode : 'local',
					        triggerAction : 'all',  
					        readOnly : false,
					        editable:false
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'datefield',
	                        fieldLabel: '注册时间（起）',
	                        name: 'registerTimeMin',
	                        id: 'registerTimeMin',
	                        format:'Y-m-d'
	                    }]
	                },{
	                    layout: 'form',
	                    items: [{
	                        xtype:'datefield',
	                        fieldLabel: '注册时间（止）',
	                        name: 'registerTimeMax',
	                        id: 'registerTimeMax',
	                        format:'Y-m-d'
	                    }]
	                }]
	            },{
                    layout: 'form',
                    items: [{
                        xtype:'combo',
                        fieldLabel:'状态',
                        name: 'enabled',
                        id: '_enabled',
                        store : new Ext.data.SimpleStore({  
				            fields : ['value', 'text'],  
				            data : [['true','可用'],['false','禁用']]
				        }),
                        hiddenName:"enabled",
				        mode:'local',
				        valueField : 'value',
				        displayField : 'text',
				        emptyText : '请选择',
				        mode : 'local',
				        triggerAction : 'all',  
				        readOnly : false,
				        editable:false
                    }]
                }
	        ],
	        buttons: [{
	            text: '查询',
	            handler:function(){
	            	var condition = Ext.encode(sform.getForm().getValues());
					store.load({
						params:{
							"start":0,
							"limit":15,
							"jCondition":condition
						}
					});
	            }
	        },{
	            text: '重置',
	            handler:function(){sform.form.reset();}
	        }]
	    });
    
		var doReset = function(){
			Ext.getCmp("username").setValue("");
			Ext.getCmp("email").setValue("");
			Ext.getCmp("_roleName").setValue("");
			Ext.getCmp("registerTimeMin").setValue("");
			Ext.getCmp("registerTimeMax").setValue("");
			Ext.getCmp("_enabled").setValue("");
		}
		
	    var grid = new Ext.grid.GridPanel({
	    	id: "gridPanel",
	        store: store,
	        sm: selM,
	        cm: colM,
	        region:"center",
	        layout: "fit",
	        stripeRows: true,
	        autoScroll : true,
	        autoWidth : true, 
	        autoHeight : true, 
	        loadMask: {msg: '正在加载数据，请稍侯……'},
	        viewConfig:
	        {
	            columnsText: '列',
	            sortAscText: '升序',
	            sortDescText: '降序',
				forceFit: true
	        },
	        bbar: new Ext.PagingToolbar({
	            pageSize: 15,
	            store: store,
	            displayInfo: true,
	            displayMsg: '总记录数 {0} - {1} of {2}',
	            emptyMsg: "没有记录"
	        })
	    });
		
		var viewport = new Ext.Viewport({
        	layout:'border',
	        items:[
	        	sform,
	            grid
	        ]}
		);
	    viewport.render(document.body);        
	    store.load({ params: { start: 0, limit: 15} });
	    //加上这一句，否则一翻页查询条件就丢失了
	    store.on('beforeload',function(){
	        Ext.apply(
	        this.baseParams,
	        {
	           "jCondition":Ext.encode(sform.getForm().getValues())
	        });
	    });
	    
	});
    </script>
  </body>
</html>